<template>
  <div class="app-container">
    <el-card :body-style="bodyStyle">
      <div slot="header" class="clearfix">
        <span>
          <el-form :inline="true" :model="user">
          <el-row :gutter="10">
            <el-col v-show="false">
              <el-form-item  prop="id">
                <el-input   v-model="user.id" ></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="登录名" prop="username">
                <el-input disabled style="min-width: 240px;"   v-model="user.username" auto-complete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">

              <el-form-item label="显示名" prop="displayName">
                <el-input disabled style="min-width: 240px;"  v-model="user.displayName" auto-complete="off"></el-input>
              </el-form-item>
            </el-col>

          </el-row>
        </el-form>
        </span>
      </div>
      <div>
        <el-row>
          <el-col >
            <el-tree
              :data = "treeData"
              node-key="id"
              ref="tree"
              show-checkbox
              :props="defaultProps">
                   <span slot-scope ="{ node, data }">
                          <span>{{ node.label }}</span>
                      </span>
            </el-tree>
          </el-col>
        </el-row>



        <br>
        <br>
        <el-row>
          <el-col :span="5" :offset="8">
            <el-button type="primary" @click="submitEdit">确定</el-button>
          </el-col>
        </el-row>

      </div>
    </el-card>
  </div>

</template>

<script>
  import {assignDataScope,getDataScopeByUserName} from '@/api/sys/user/';
  import {getDepartmentListPage } from '@/api/sys/department/';
  export default {
      name:'assignDataScope',
    data() {

      return {
        bodyStyle:{
          height: '720px'
        },
        treeData:[],
        visible: false,
        user:{
        },
        defaultProps: {
          children: 'children',
          label: 'name',
          id:'id',
          disabled:function (data, node) {
            if(data.disabled){
              return false;
            }else{
              return true;
            }
          }
        },
      }
    },
    activated(){
      this.init(this.$route.query.data);
    },
    methods: {
      init(row){
        let that =this;
        this.visible =true;
        this.loadingDepartmentTree(row);
        this.$nextTick(()=> {
          if(row != undefined){
            that.user = Object.assign({},row);
          }
        })
      },
      getDataScopeByUserIdHandle(userName,departmentId){
        getDataScopeByUserName(userName).then(result=>{
            let {data,code} = result.data;
            if(code == 0){
              this.$refs.tree.setCheckedKeys(data.dept);
            }
        }).catch();
      },
      loadingDepartmentTree(row) {
        let that = this;
        getDepartmentListPage({}).then(function (result) {
          let {data,code} = result.data;
          that.treeData= [];
          data.forEach((item) =>{
            that.treeData.push(item);
          });
          if(row){
            that.getDataScopeByUserIdHandle(row.username);

          }

        }).catch(function (error) {

        });
      },
      isSelectTable(row, index){
        return row.disabled;
      },
      submitEdit(){
        let that = this;
        var ids =this.$refs.tree.getCheckedKeys();

        assignDataScope({id:that.user.id,dataScopes:{dept: ids}}).then(function (result) {
          let {code,msg,data} = result.data;
          if(code == '0'){
            that.$message({
              type: 'success',
              message: msg
            });
          }else{
            that.$message.error(msg);
          }
        }).catch(function (error) {
          that.$message.error(error.response.data.msg);
        });

      },

    }



  }

</script>
<style>

</style>
